<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>网页秒表</title>
  <meta charset="UTF-8"/>
  <style type="text/css">
  #div{border:double;margin:auto;width:300px;text-align:center;height:400px;}
  #begin{width:90px;height:50px;font-size:25px;color:green}
  #time{width:90px;height:50px;font-size:25px;color:green}
  #reset{width:90px;height:50px;font-size:25px;color:red}
  #again{width:284px;height:40px;font-size:35px}
  #show{height:60px;font-size:25px}
  .a{ height:30px; border:solid 1px black; }
 </style>
 	<script type='text/javascript'>
  	window.onload = function(){
		var div = document.getElementById('div');
		var begin = document.getElementById('begin');
		var time = document.getElementById('time');
		var reset = document.getElementById('reset');
		var again = document.getElementById('again');
		var show = document.getElementById('show');
		
		 var times; 
		 var interval, reg = /^\d$/,
         i = 0;
		 var h,m,s;
  		begin.onclick = function(){
			
			show.innerHTML =null;
			a=1;
			d="";
			this.disabled = true;
				 times = setInterval(function() {
                        i++;
                        var d = new Date("1111/1/1,0:0:0");
                        d.setSeconds(i);
						
                        h = d.getHours();
                        h = reg.test(h) ? "0" + h + ":" : h + ":";
						
                        m = d.getMinutes();
                        m = reg.test(m) ? "0" + m + ":" : m + ":";
						
                        s = d.getSeconds();
                        s = reg.test(s) ? "0" + s : s;
						
                        again.innerHTML = h + m + s;
                    }, 15);	
				
			}
			
			var a = 1;
			time.onclick = function(){
			if(i>0&&a<9){
				var nd = document.createElement('div');
				nd.innerHTML =a+"  " +h + m + s;
				nd.className = 'a';	
				show.appendChild(nd);
				a++;
				}
			 }
			reset.onclick = function(){
				begin.disabled = false;
				clearInterval(times);
				
			} 
	
		}
 	</script>
</head>
<body>
 <div id='div'>
	<table id='table'></table>
	<button id='begin'>开始</button>
	<button id='time'>计时</button>
	<button id='reset'>结束</button>
	<hr/>
	<div id='again'>00:00:00</div>
	<hr/>
	<div id='show'></div>
 </div>
</body>
</html>
